<template>
    <div class="contentBox">
        <div class="content">
            <div>
                <el-divider content-position="left"><b>{{ textTitle }}</b></el-divider>
            </div>
            <!-- <div v-if="textTitle !== '好友'">
                <el-menu default-active="1" mode="horizontal">
                    <el-menu-item index="1" @click="friendRemoveSwitch">好友圈 6</el-menu-item>
                    <el-menu-item index="2" @click="friendRemoveSwitch">移除好友 2</el-menu-item>
                </el-menu>
            </div> -->

            <!-- 批量管理 未处理模式 -->
            <div v-if="manageMode === false" class="content-manage-untreated">
                <!-- <span @click="manageModeSwitch">批量管理</span> -->
                <el-row :gutter="10">
                    <el-col :span="5">
                        <el-select v-model="value" v-if="contentTitle === 0 || contentTitle === 2"
                            size="mini" placeholder="排序">
                            <el-option label="全部" value="0"></el-option>
                            <el-option label="按添加时间降序" value="2"></el-option>
                            <el-option label="按添加时间升序" value="1"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-input size="mini" placeholder="输入昵称或备注" class="input-with-select" v-model="search">
                            <el-button slot="append" icon="el-icon-search" @click="searchM">搜索</el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </div>

            <!-- 批量管理 处理模式 -->
            <div v-if="manageMode === true" class="content-manage-handle">
                <el-popover placement="bottom" width="180" trigger="click" size="mini">
                    <el-checkbox label="老师"></el-checkbox>
                    <el-checkbox label="同班"></el-checkbox>
                    <el-checkbox label="校友"></el-checkbox>
                    <el-checkbox label="最亲"></el-checkbox>
                    <el-checkbox label="学校"></el-checkbox>
                    <div>
                        <el-button size="mini" icon="el-icon-check">确定</el-button>
                        <el-button size="mini" icon="el-icon-plus" @click="friendGoupDialog = true">创建分组
                        </el-button>
                    </div>
                    <el-button type="primary" size="mini" slot="reference">
                        <span>移动到</span>
                        <i class="el-icon-arrow-down"></i>
                    </el-button>
                </el-popover>
                <el-button type="primary" size="mini">取消关注
                </el-button>
                <el-button type="primary" size="mini" v-if="friendRemove === false">移除关注
                </el-button>
                <el-button type="primary" size="mini" v-if="friendRemove === true">恢复到好友圈
                </el-button>
                <el-button size="mini" @click="manageModeSwitch">退出批量管理
                </el-button>
                <el-checkbox label="本页全选" @change="friendAllchecked"></el-checkbox>
                <!-- <span @click="friendAllchecked(false)">取消选择</span> -->
            </div>

        </div>

        <!-- 创建好友分组对话框 -->
        <el-dialog title="创建新分组" :visible.sync="friendGoupDialog" width="20%">
            <el-input></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="friendGoupDialog = false">取 消</el-button>
                <el-button type="primary" @click="addFriendGroup">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 好友列表-->
        <RecommendFriend :search='search' ref="recommendFriend" :sortType= 'value'/>
    </div>
</template>

<script>
    import RecommendFriend from '@c/studentFollow/recommendFriend.vue'

    export default {
        watch: {
            value(val){
                this.$refs.recommendFriend.getRecommend()
            }
        },
        components: {
            RecommendFriend
        },
        mounted() {},
        data() {
            return {
                search: '',
                textTitle: "好友", // 内容标题信息 默认为全部关注
                contentTitle: 0,
                friendRemove: false, // 移除好友
                manageMode: false,
                value: "0",
                friendGoupDialog: false //创建好友分组弹窗
            }
        },
        methods: {
            searchM() {
                if(this.search == '')  {
                    // this.$message.warning('请先输入查询内容!')
                    this.$refs.recommendFriend.getRecommend()
                }else{
                    this.$refs.recommendFriend.getRecommend()
                }
            },
            //好友圈移除切换
            friendRemoveSwitch() {
                if (this.friendRemove) {
                    this.friendRemove = false;
                } else {
                    this.friendRemove = true;
                }
            },
            //管理模式切换
            manageModeSwitch() {
                if (this.manageMode) {
                    this.manageMode = false;
                } else {
                    this.manageMode = true;
                }
            },
            //全选当前页好友
            friendAllchecked(val) {
                for (let i = 0; i < this.friendGoupList.length; i++) {
                    this.friendGoupList[i].checked = val;
                }
            },
            //添加分组确认框
            addFriendGroup() {
                this.$confirm("确认添加“" + this.groupName + "”分组？")
                    .then(_ => {})
                    .catch(_ => {});
            },
        }
    }
</script>

<style lang="scss" scoped>
    .contentBox {
        background: #fff;
        padding: 5px;
        width: 100%;
        min-height: 520px;
        margin-left: 20px;
        position: relative;

        .content {
            width: 100%;
            text-align: left;
            margin: 10px;

            .content-manage-untreated {
                margin: 10px 20px 0px 0px;

                span {
                    font-size: 16px;
                    margin-right: 30px;
                    cursor: pointer;
                }

                span:hover {
                    color: #1e90ff;
                }

                .search {
                    padding-right: 25px;
                    position: relative;
                    bottom: 5px;
                    float: right;
                    width: 250px;
                }
            }

            .content-manage-handle {
                margin: 10px 20px 0px 0px;

                .el-checkbox {
                    margin-left: 20px;
                    margin-right: 20px;
                }

                span {
                    padding-right: 20px;
                    cursor: pointer;
                }

                span:hover {
                    color: #1e90ff;
                }
            }
        }

    }
</style>